<template>
	<view class="shop-card" style="margin-bottom: 20rpx;">
		<!-- 购物车商品卡片 -->
		<view class="w-750 b-box d-flex felx-r ali-i-c just-s bg-ff" style="height: 264rpx;padding: 32rpx;">
			<view style="height: inherit;" class="d-flex flex-r ali-i-c just-c">
				<view class="d-flex flex-r ali-i-c just-c" v-if="!cardData.isSelected"
					style="width: 36rpx;height: 36rpx;border: 4rpx solid #dddddd;border-radius: 150rpx;"></view>
				<view v-else style="width: 36rpx;height: 36rpx;border: 2rpx solid #dddddd;border-radius: 50rpx;">
					<image :src="require('../../static/xz.png')" style="width: 36rpx;height: 36rpx;"></image>
				</view>
			</view>
			<view class="d-flex flex-r ali-i-c just-s" style="height: inherit;flex: 1;">
				<view class="d-flex flex-r ali-i-c just-c"
					style="width: 200rpx;height:200rpx;border-radius: 10rpx;overflow: hidden;margin-right: 20rpx;">
					<image :src="require('../../static/icon/kefu2.png')" style="width: 200rpx;height:200rpx"></image>
				</view>
				<view class="d-flex flex-c ali-i-s just-s b-box po-re"
					style="height: inherit;padding: 32rpx 0;left: 10rpx;flex: 1;">
					<text class="pf-sc fw-500 c-333" style="font-size: 28rpx;margin-bottom: 10rpx;">迪加伦 高档太阳能悬浮汽车</text>
					<view class="d-flex flex-r ali-i-c just-s"
						style="width: 208rpx;height: 46rpx;margin-bottom: 48rpx;">
						<text style="font-size: 24rpx;color: #666666;" class=" pf-sc fw-400">规格分类名称</text>
					</view>
					<view class="d-flex flex-r ali-s-c just-sw w-100" style="height: 60rpx;">
						<view class="d-flex flex-r ali-i-c just-s">
							<text class="fw-600 pf-sc po-re"
								style="font-size: 22rpx;color:#FF5C00;top:4rpx;margin-right: 4rpx;">¥</text>
							<text class="fw-600 pf-sc" style="font-size: 36rpx;color:#FF5C00;">186.00</text>
						</view>
						<view>
							<u-number-box :min="1" :max="100">
								<view slot="minus" style="width: 60rpx;height:60rpx;" @click="cardData.count--">
									<image v-if="cardData.count>1" :src="require('../../static/icon1.png')" style="width: 60rpx;height:60rpx;"></image>
									<image v-else :src="require('../../static/icon3.png')" style="width: 60rpx;height:60rpx;"></image>
								</view>
								<view slot="input" style="width: 60rpx;height:60rpx;" class="d-flex flex-r ali-i-c just-c">
									<text class="pf-sc fw-600 " style="font-size: 30;color: #666666;">{{cardData.count}}</text>
								</view>
								<view slot="plus" @click="cardData.count++" style="width: 60rpx;height:60rpx;">
									<image :src="require('../../static/icon2.png')" style="width: 60rpx;height:60rpx;"></image>
								</view>
							</u-number-box>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uNumberBox from '../uview-ui/components/u-number-box/u-number-box';
	export default {
		components: {
			'u-number-box': uNumberBox
		},
		props: {
			cardData: {
				type: Object,
				default: function() {
					return {}
				}
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	.shop-card {}
</style>
